<template>
	<el-row class="IoSpeakingWriting-box">
		<div class="chooseTimeBox">
			<template>
				<div style="margin-left: 15px;">选择时间：</div>
				<div class="block">
					<div>
						<el-date-picker v-model.lazy="startTime" value-format="yyyy-MM-dd HH:mm:ss"
							:picker-options="expireTimeOPtion" type="datetime" placeholder="选择开始日期时间">
						</el-date-picker>
					</div>
				</div>
				<div style="margin: 0px 10px 0px 10px;">至</div>
				<div class="block">
					<div>
						<el-date-picker v-model.lazy="endTime" value-format="yyyy-MM-dd HH:mm:ss"
							type="datetime" placeholder="选择结束日期时间" :picker-options="expireTimeOPtion">
						</el-date-picker>
					</div>
				</div>
			</template>
			<div style="margin-left: 20px;">
				<el-button type="primary" icon="el-icon-search" @click="initGetData">搜索</el-button>
			</div>
		</div>
		<el-col :span="24" class="IoSpeakingWriting-page">
			<div id="DBTIME" class="linePage ScaleCSSViewport_unzoom" v-loading="loading"
				element-loading-spinner="el-icon-loading" element-loading-background="#021033"></div>
		</el-col>
		<el-col style="margin-top:20px">
			<i style="color:red;font-size:20px">*</i>
			DBTime是Oracle数据库在时间维度上剖析性能的一个重要指标，通过逐级分解该指标，定位到浪费资源或者资源争用的首要事件上，从而通过减少等待以及最小化每个请求的使用资源来达到优化的目的
		</el-col>
	</el-row>
</template>>

<script>
	import {
		getItemMonitorDbTime
	} from "@/api/index.js";
	import bus from "common/bus.js";
	import {
		Line
	} from "@antv/g2plot";
	export default {
		data() {
			return {
				selectedMonID: "",
				timerName: "itemMonitorCpuAndIo",
				timerEventName: "itemMonitortimerCpuAndIo",
				timerInterval: 1000 * 30,
				lineItem: "",
				expireTimeOPtion: {
					disabledDate(time) {
						return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的 
					}
				},
				lineData: [],
				chooseTime: [],
				startTime:'',
				endTime:new Date(),
				read: "",
				loading: false,
				postData: {
					filters: {
						monid: "",
						ip: "",
					},
				},
				getNum: 30,
			};
		},
		props: {
			initData: null
		},
		created() {
			this.selectedMonID = this.$store.getters["ItemMonitorALL/getItem"];

			this.postData.filters.ip = this.selectedMonID.IP;
			this.first()
			this.initGetData();

			bus.$emit("timerNewTodo", {
				name: this.timerName,
				eventName: this.timerEventName,
				interval: this.timerInterval,
				intervalNow: 0,
			});

			bus.$on(this.timerEventName, (msg) => {
				if (msg.isGetData) {
					this.initGetData();
				}
			});
		},
		mounted() {
			bus.$on("ItemMonitorALL", (msg) => {
				this.resetData();
				this.selectedMonID = msg;
				this.postData.filters.ip = this.selectedMonID.IP;

				this.initGetData();
			});
			this.initLine();
		},
		computed: {},
		methods: {
			initGetData() {
				this.lineData = []
				getItemMonitorDbTime({
						cid: this.selectedMonID.MONID,
						time:this.startTime,
						time2:this.endTime
					})
					.then((res) => {
						console.log('dbtime',res)
						if (Object.values(res).length > 0) {
							this.lineData = Object.values(res)[0].map((item) => {
								return {
									Date: item.recordTime,
									scales: item.dbtime,
								};
							});
						} else {
							this.lineData = []
						}
						this.lineItem.changeData(this.lineData);
					})
					.finally((_) => {});
			},
			first(){
				let time = Date.parse(new Date(this.endTime))
				let startTime = parseInt(time) - 3600000 * 7 * 24
				this.startTime = this.changeTime(startTime)
				this.endTime = this.changeTime(time)
			},
			changeTime(timestamp) {
				let date = new Date(parseInt(timestamp));
				let Year = date.getFullYear();
				let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
				let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
				let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
				let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				return Year + '-' + Moth + '-' + Day + ' ' + Hour + ':' + Minute + ':' + Sechond;
			},
			resetData() {
				this.lineData = [];
				this.read = "";
			},
			initLine() {
				this.lineItem = new Line("DBTIME", {
					data: this.lineData,
					padding: "auto",
					xField: "Date",
					yField: "scales",
					height: 110,
					xAxis: true,
					areaStyle: () => {
						return {
							fill: "l(270) 0:#ffffff 0.5:#7ec2f3 1:#FF0000",
						};
					},
					tooltip: {
						formatter: (datum) => {
							return {
								name: "值",
								value: datum.scales
							};
						},
					},
				});
				this.lineItem.render();
			},
		},
		beforeDestroy() {
			bus.$emit("timerNewTodo", {
				name: this.timerName,
			});
			this.lineItem.destroy();
			bus.$off("SqlServerInitChart");
		},
	};
</script>
<style scoped>
	.IoSpeakingWriting-box {
		height: 550px;
	}
	
	.chooseTimeBox{
		width: 100%;
		display: flex;
		flex-direction: row;
		margin: 15px auto;
		align-items: center;
	}

	.IoSpeakingWriting-page {
		height: 90%;
		width: 100%;
	}

	.linePage {
		height: 100%;
		width: 100%;
	}
</style>
